<template>
  <div class="app-container">
    <a-list :grid="{gutter: 24}">
      <a-list-item>
        <a-card :loading="loading" :bordered="false" :hoverable="true" title="CPU">
          <div class="ant-table">
            <table cellspacing="0" style="width: 100%">
              <thead class="ant-table-thead">
                <tr>
                  <th><div>属性</div></th>
                  <th><div>值</div></th>
                </tr>
              </thead>
              <tbody class="ant-table-tbody">
                <tr class="ant-table-row">
                  <td><div>核心数</div></td>
                  <td>
                    <div v-if="server.cpu">{{ server.cpu.cpuNum }}</div>
                  </td>
                </tr>
                <tr>
                  <td><div class="cell">用户使用率</div></td>
                  <td>
                    <div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div>
                  </td>
                </tr>
                <tr>
                  <td><div class="cell">系统使用率</div></td>
                  <td>
                    <div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div>
                  </td>
                </tr>
                <tr>
                  <td><div class="cell">当前空闲率</div></td>
                  <td>
                    <div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </a-card>
      </a-list-item>
      <a-list-item>
        <a-card :loading="loading" :bordered="false" :hoverable="true" title="内存">
          <div class="ant-table">
            <table cellspacing="0" style="width: 100%">
              <thead class="ant-table-thead">
                <tr>
                  <th class="ant-table-row-cell"><div class="cell">属性</div></th>
                  <th class="ant-table-row-cell"><div class="cell">内存</div></th>
                  <th class="ant-table-row-cell"><div class="cell">JVM</div></th>
                </tr>
              </thead>
              <tbody class="ant-table-tbody">
                <tr class="ant-table-row">
                  <td><div class="cell">总内存</div></td>
                  <td>
                    <div class="cell" v-if="server.memory">{{ server.memory.total }}G</div>
                  </td>
                  <td>
                    <div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div>
                  </td>
                </tr>
                <tr>
                  <td><div class="cell">已用内存</div></td>
                  <td>
                    <div class="cell" v-if="server.memory">{{ server.memory.used }}G</div>
                  </td>
                  <td>
                    <div class="cell" v-if="server.jvm">{{ server.jvm.used }}M</div>
                  </td>
                </tr>
                <tr>
                  <td><div class="cell">剩余内存</div></td>
                  <td>
                    <div class="cell" v-if="server.memory">{{ server.memory.free }}G</div>
                  </td>
                  <td>
                    <div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div>
                  </td>
                </tr>
                <tr>
                  <td><div class="cell">使用率</div></td>
                  <td>
                    <div class="cell" v-if="server.memory" :class="{ 'text-danger': server.memory.usage > 80 }">
                      {{ server.memory.usage }}%
                    </div>
                  </td>
                  <td>
                    <div class="cell" v-if="server.jvm" :class="{ 'text-danger': server.jvm.usage > 80 }">
                      {{ server.jvm.usage }}%
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </a-card>
      </a-list-item>

      <a-list-item :span="24">
        <a-card :loading="loading" :bordered="false" :hoverable="true" title="服务器信息">
          <div class="ant-table">
            <table cellspacing="0" style="width: 100%">
              <tbody  class="ant-table-tbody">
                <tr class="ant-table-row">
                  <td><div class="cell">服务器名称</div></td>
                  <td>
                    <div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div>
                  </td>
                  <td><div class="cell">操作系统</div></td>
                  <td>
                    <div class="cell" v-if="server.sys">{{ server.sys.osName }}</div>
                  </td>
                </tr>
                <tr>
                  <td><div class="cell">服务器IP</div></td>
                  <td>
                    <div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div>
                  </td>
                  <td><div class="cell">系统架构</div></td>
                  <td>
                    <div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </a-card>
      </a-list-item>

      <a-list-item :span="24" class="card-box">
        <a-card :loading="loading" :bordered="false" :hoverable="true"  title="Java虚拟机信息">
          <div class="ant-table">
            <table cellspacing="0" style="width: 100%">
              <tbody class="ant-table-tbody">
                <tr class="ant-table-tbody">
                  <td><div class="cell">Java名称</div></td>
                  <td>
                    <div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div>
                  </td>
                  <td><div class="cell">Java版本</div></td>
                  <td>
                    <div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div>
                  </td>
                </tr>
                <tr>
                  <td><div class="cell">启动时间</div></td>
                  <td>
                    <div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div>
                  </td>
                  <td><div class="cell">运行时长</div></td>
                  <td>
                    <div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div>
                  </td>
                </tr>
                <tr>
                  <td colspan="1"><div class="cell">安装路径</div></td>
                  <td colspan="3">
                    <div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div>
                  </td>
                </tr>
                <tr>
                  <td colspan="1"><div class="cell">项目路径</div></td>
                  <td colspan="3">
                    <div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </a-card>
      </a-list-item>

      <a-list-item :span="24" class="card-box">
        <a-card :loading="loading" :bordered="false" :hoverable="true" title="磁盘状态">
          <div>
            <table cellspacing="0" style="width: 100%">
              <thead class="ant-table-thead">
                <tr>
                  <th class="ant-table-row-cell"><div class="cell">盘符路径</div></th>
                  <th class="ant-table-row-cell"><div class="cell">文件系统</div></th>
                  <th class="ant-table-row-cell"><div class="cell">盘符类型</div></th>
                  <th class="ant-table-row-cell"><div class="cell">总大小</div></th>
                  <th class="ant-table-row-cell"><div class="cell">可用大小</div></th>
                  <th class="ant-table-row-cell"><div class="cell">已用大小</div></th>
                  <th class="ant-table-row-cell"><div class="cell">已用百分比</div></th>
                </tr>
              </thead>
              <tbody class="ant-table-tbody" v-if="server.sysFiles">
                <tr  class="ant-table-tbody" v-for="sysFile in server.sysFiles" :key="sysFile">
                  <td>
                    <div class="cell">{{ sysFile.dirName }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.sysTypeName }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.typeName }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.total }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.free }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.used }}</div>
                  </td>
                  <td>
                    <div class="cell" :class="{ 'text-danger': sysFile.usage > 80 }">{{ sysFile.usage }}%</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </a-card>
      </a-list-item>
    </a-list>
  </div>
</template>
<script>
import { getServer } from '@/api/monitor'
export default {
  name: 'Server',
  data() {
    return {
      server: [],
      loading: true,
    }
  },
  created() {
    getServer().then((response) => {
      this.server = response.result
    })
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  },
}
</script>
<style lang="less" scoped>
.app-container {
  padding: 20px;
}
</style>